<template>
  <div class="bar_nav">
    <button class="iconfont icon-fanhui" id="back" v-if="params.back" @click="backAction"></button>
    <h3 class="title">{{ params.title }}</h3>
    <div class="other">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NavigationBar",
    computed: {
      params: function () {
        // $store vue实例内置的接口用来返回当前vue应用程序中对应的状态管理对象
        // console.log(this.$store);
        return this.$store.state.nav.navition_option;
      }
    },
    methods:{
      backAction(){
       this.$router.go(-1) ;
      }
    }
  };
</script>

<style lang="less" scoped>
  .bar_nav {
    width: 100%;
    height: 44px;
    /*no */
    background: blueviolet;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index:10000 ;
  }

  .title {
    text-align: center;
    color: white;
    font-size: 0.5rem;
    line-height: 44px;
    /*no */
    font-weight: 300;
  }

  #back {
    height: 44px;
    /*no */
    width: 44px;
    /*no */
    padding: 0.1rem;
    position: absolute;
    left: 0;
    top: 0;
    border: 0;
    font-size: 0.5rem;
    background: rgba(0, 0, 0, 0);
    outline: none;
    color: white;
    font-weight: bold;
  }
</style>